<template>
	<view class="pre-setting">
		<!-- 基础表单校验 -->
		<view class="form-box" v-if="isLoad">
			<view v-for="(item,index) in productionModel" :key="index" class="setting-item">
				<view class="form-title">{{item.modelName}}预定设置</view>
				<uni-forms ref="chessValiForm" :rules="rules" :modelValue="item.formData">
					<uni-forms-item label-width="350rpx" label="最大预定天数" required name="maxBookDay">
						<uni-easyinput v-model="item.formData.maxBookDay" primaryColor="#ffd589"
							placeholder="请输入最大预定天数" />
					</uni-forms-item>
					<uni-forms-item label-width="350rpx" label="最小起订时长" required name="minBookTime">
						<uni-easyinput v-model="item.formData.minBookTime" primaryColor="#ffd589"
							placeholder="请输入最小起订时长" />
					</uni-forms-item>
					<uni-forms-item label-width="350rpx" label="最小续订时长" required name="minRenewalTime">
						<uni-easyinput v-model="item.formData.minRenewalTime" primaryColor="#ffd589"
							placeholder="请输入最小续订时长" />
					</uni-forms-item>
					<uni-forms-item label-width="350rpx" label="需缴纳保证金" required name="depositMoney">
						<uni-easyinput v-model="item.formData.depositMoney" primaryColor="#ffd589"
							placeholder="请输入需缴纳保证金" />
					</uni-forms-item>
					<uni-forms-item label-width="350rpx" label="订单结束前X分钟提醒" required name="endNotify">
						<uni-easyinput v-model="item.formData.endNotify" primaryColor="#ffd589" placeholder="请输入时间" />
					</uni-forms-item>
					<uni-forms-item label-width="350rpx" label="预定订单开始前X分钟起，用户将无法取消订单" required name="startRefund">
						<uni-easyinput v-model="item.formData.startRefund" primaryColor="#ffd589" placeholder="请输入时间" />
					</uni-forms-item>
					<uni-forms-item label-width="350rpx" label="用户可提前X分钟开始订单" required name="beforeUse">
						<uni-easyinput v-model="item.formData.beforeUse" primaryColor="#ffd589" placeholder="请输入时间" />
					</uni-forms-item>
					<uni-forms-item label-width="350rpx" label="预定时间间隔（单位：分钟）" required name="timeInterval">
						<uni-number-box :max="120" :min="10" :step="5" v-model="item.formData.timeInterval"
							primaryColor="#ffd589" placeholder="请输入时间" />
					</uni-forms-item>
				</uni-forms>
			</view>
		</view>
		<view class="footer-box">
			<button type="default" style="color: #FFF; background:#ff9600;borderColor:#ff9600"
				@click="submit">确认</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productionModel: [],
				isLoad:false,
				shopId: '',
				//棋牌配置
				chessValiFormData: {
					shopId: '',
					type: '1', //类型，1-棋牌，2-台球
					maxBookDay: 0, //最大预定天数
					minBookTime: 0, //最小起订时长
					minRenewalTime: 0, //最小续订时长
					depositMoney: 0, //保证金
					endNotify: 0, //结束前多少分钟提醒
					startRefund: 0, //开始前多少分钟可退订
					beforeUse: 0, //开始前多少分钟可提前使用
					timeInterval: 10 //预定时间间隔
				},
				//台球配置
				billiardValiFormData: {
					shopId: '',
					type: '2', //类型，1-棋牌，2-台球
					maxBookDay: 0, //最大预定天数
					minBookTime: 0, //最小起订时长
					minRenewalTime: 0, //最小续订时长
					depositMoney: 0, //保证金
					endNotify: 0, //结束前多少分钟提醒
					startRefund: 0, //开始前多少分钟可退订
					beforeUse: 0, //开始前多少分钟可提前使用
					timeInterval: 10 //预定时间间隔
				},
				commonRules: {
					ttsClientId: {
						rules: [{
							required: true,
							errorMessage: '通通锁客户端ID不能为空'
						}]
					},
					ttsClientSecret: {
						rules: [{
							required: true,
							errorMessage: '通通锁客户端密钥不能为空'
						}]
					},
					swClientId: {
						rules: [{
							required: true,
							errorMessage: '云喇叭客户端ID不能为空'
						}]
					},
					swClientSecret: {
						rules: [{
							required: true,
							errorMessage: '云喇叭客户端密钥不能为空'
						}]
					},
				},
				rules: {
					maxBookDay: {
						rules: [{
							required: true,
							errorMessage: '最大预定天数不能为空'
						}]
					},
					minBookTime: {
						rules: [{
							required: true,
							errorMessage: '最小起订时长不能为空'
						}]
					},
					minRenewalTime: {
						rules: [{
							required: true,
							errorMessage: '最小续订时长不能为空'
						}]
					},
					depositMoney: {
						rules: [{
							required: true,
							errorMessage: '保证金不能为空'
						}]
					},
					endNotify: {
						rules: [{
							required: true,
							errorMessage: '结束前多少分钟提醒不能为空'
						}]
					},
					startRefund: {
						rules: [{
							required: true,
							errorMessage: '开始前多少分钟可退订不能为空'
						}]
					},
					beforeUse: {
						rules: [{
							required: true,
							errorMessage: '开始前多少分钟可提前使用不能为空'
						}]
					},
					timeInterval: {
						rules: [{
							required: true,
							errorMessage: '预定时间间隔不能为空'
						}]
					}
				}
			};
		},
		methods: {
			// 获取门店产品类型
			getStoreProductionModel() {
				this.$request({
					method: 'get',
					url: `/applet/store/product/openModelList/${this.shopId}`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.productionModel = res?.data || []
					this.productionModel.forEach((item) => {
						let obj = {
							shopId: this.shopId,
							type: item.modelType, //类型，1-棋牌，2-台球 3-KTV
							maxBookDay: 0, //最大预定天数
							minBookTime: 0, //最小起订时长
							minRenewalTime: 0, //最小续订时长
							depositMoney: 0, //保证金
							endNotify: 0, //结束前多少分钟提醒
							startRefund: 0, //开始前多少分钟可退订
							beforeUse: 0, //开始前多少分钟可提前使用
							timeInterval: 10 //预定时间间隔
						}
						this.$set(item, 'formData', obj)
					})
					this.getSettingDetail()
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},

			// 获取配置详情
			getSettingDetail() {
				this.$request({
					method: 'get',
					url: `/applet/store/shopInfraConfig/list/${this.shopId}`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if (res?.data?.length) {
                        this.productionModel.forEach((item) => {
							res.data.forEach((obj)=>{
								if(item.modelType === obj.type){
									this.$set(item, 'formData', obj)
								}
							})	
                        })
					}
					this.isLoad = true
				}).catch(err => {
					console.log('查询异常：', err)
				})
			},
			// 保存设置
			submit() {
				const domArr = this.$refs['chessValiForm']
				let flag = 0
				domArr.forEach((item) => {
					item.validate().then(res => {
						flag++
						if(flag === domArr.length){
							this.submitEvent()
						}
					}).catch(err => {
						console.log('err', err);
					})
				})
			},
			// 修改门店棋牌基本配置
			submitEvent() {
				const data = []
				this.productionModel.forEach((item)=>{
					data.push(item.formData)
				})
				this.$request({
					method: 'POST',
					url: `/applet/store/shopInfraConfig/updateList`,
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '保存成功',
							duration: 2000
						})
					} else if (res.code === 500) {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log('更新异常：', err)
				})
			}
		},
		onLoad(option) {
			this.shopId = option.shopId;
			this.getStoreProductionModel()
		}
	}
</script>

<style lang="scss" scoped>
	.pre-setting {
		.form-box {
			background: #FFF;
			padding: 0 30rpx 160rpx 30rpx;
		}

		.form-title {
			position: relative;
			text-align: left;
			color: #353535;
			font-size: 16px;
			font-weight: bold;
			height: 36px;
			padding-top: 12px;
			padding-left: 15px;
			border-bottom: 1px solid #ff9600;
			margin-bottom: 20rpx;
		}

		.form-title::before {
			content: '';
			width: 8rpx;
			height: 36rpx;
			position: absolute;
			left: 10rpx;
			top: 28rpx;
			background: #ff9600;
		}

		.footer-box {
			position: fixed;
			bottom: 0;
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			background: #FFF;
		}

		.noMore {
			text-align: center;
			padding: 32rpx 0;
			color: #CCC;
			font-size: 28rpx;
		}
	}
</style>